<script setup lang="ts">
import { ref } from 'vue'
import ORShowInfo from '@/views/organizer/OR_show_info.vue'
import ORQuaApp from '@/views/organizer/OR_qua_app.vue'
import ORNewQuaApp from '@/views/organizer/OR_new_qua_app.vue'
import ORShowPlace from '@/views/organizer/OR_show_place.vue'
import ORPlaceApp from '@/views/organizer/OR_place_app.vue'
import ORShowGame from '@/views/organizer/OR_show_game.vue'
import ORChangeGameInfo from '@/views/organizer/OR_Change_gameInfo.vue'
import ORGameEventInfo from '@/views/organizer/OR_gameEvent_info.vue'
import ORNewGameEvent from '@/views/organizer/OR_new_gameEvent.vue'
import OREventRegister from '@/views/organizer/OR_eventRegister.vue'
import ORShowSchedule from '@/views/organizer/OR_show_schedule.vue'
import ORNewSchedule from '@/views/organizer/OR_new_schedule.vue'
import ORShowScoreManager from '@/views/organizer/OR_show_scoreManager.vue'
import ORScoreOrder from '@/views/organizer/OR_score_order.vue'
import ORWriteScore from '@/views/organizer/OR_write_score.vue'
import ORShowVA from '@/views/organizer/OR_show_VA.vue'
import ORNewVA from '@/views/organizer/OR_new_VA.vue'
import ORShowVE from '@/views/organizer/OR_show_VE.vue'
import ORShowNotice from '@/views/organizer/OR_show_notice.vue'
import ORShowMyNotice from '@/views/organizer/OR_show_mynotice.vue'
import ORNewNotice from '@/views/organizer/OR_new_notice.vue'

// 定义当前选中的功能页
const currentView = ref('')

// 定义当前活动ID
const currentActivityId = ref<number | null>(null)

// 定义当前要修改的比赛对象
const currentGame = ref<Game | null>(null)

// 定义比赛项目管理组件的引用
const gameEventInfoRef = ref<InstanceType<typeof ORGameEventInfo> | null>(null)

// 定义新增比赛项目组件的引用
const newGameEventRef = ref<InstanceType<typeof ORNewGameEvent> | null>(null)

// 定义报名信息管理组件的引用
const eventRegisterRef = ref<InstanceType<typeof OREventRegister> | null>(null)

// 定义新增志愿者活动组件的引用
const newVARef = ref<InstanceType<typeof ORNewVA> | null>(null)

// 定义赛程编辑数据
const scheduleEditData = ref(null)

// 定义参赛选手页面的数据
const scoreOrderData = ref({
  eventId: 0,
  rankId: 0
})

// 定义成绩录入页面的数据
const writeScoreData = ref({
  eventId: 0,
  rankId: 0,
  scheduleId: 0
})

// 定义比赛信息接口
interface Game {
  gamesId: number
  quaId: number
  orId: number
  gameName: string
  createTime: string
  appTime: string | null
  readyTime: string | null
  startTime: string | null
  endTime: string | null
  synopsis: string | null
  attachment: string | null
}

// 定义按钮点击处理函数
const showView = (viewName: string) => {
  currentView.value = viewName
}

// 处理从ORShowGame组件发出的修改比赛信息事件
const handleModifyGame = (game: Game) => {
  // 设置当前视图为修改比赛信息页面，并保存游戏对象
  currentView.value = 'viewChangeGame'
  currentGame.value = game
}

// 处理比赛项目管理事件
const handleManageGameItems = (game: Game) => {
  // 设置当前视图为比赛项目管理页面，并保存游戏对象
  currentView.value = 'viewGameEvent'
  currentGame.value = game
  
  // 在下一个tick中初始化比赛项目管理组件
  setTimeout(() => {
    if (gameEventInfoRef.value && game.gamesId) {
      gameEventInfoRef.value.init(game.gamesId)
    }
  }, 0)
}

// 处理新建比赛项目事件
const handleCreateGame = () => {
  currentView.value = 'viewChangeGame'
  // 设置游戏对象为null表示新建
  currentGame.value = null
}

// 处理显示新增比赛项目表单事件
const handleShowNewGameEventForm = (gameId: number) => {
  // 设置当前视图为新增比赛项目页面
  currentView.value = 'viewNewGameEvent'
  
  // 在下一个tick中初始化新增比赛项目组件
  setTimeout(() => {
    if (newGameEventRef.value && gameId) {
      newGameEventRef.value.init(gameId)
    }
  }, 0)
}

// 处理显示编辑比赛项目表单事件
const handleShowEditGameEventForm = (gameId: number, eventData: any) => {
  // 设置当前视图为编辑比赛项目页面
  currentView.value = 'viewNewGameEvent'
  
  // 在下一个tick中初始化编辑比赛项目组件
  setTimeout(() => {
    if (newGameEventRef.value && gameId) {
      newGameEventRef.value.initEdit(eventData)
    }
  }, 0)
}

// 处理显示报名信息管理页面事件
const handleShowEventRegisterForm = (eventId: number, gameId?: number) => {
  // 设置当前视图为报名信息管理页面
  currentView.value = 'viewEventRegister'
  
  // 在下一个tick中初始化报名信息管理组件
  setTimeout(() => {
    if (eventRegisterRef.value && eventId) {
      // 如果有gameId则一起传递
      if (gameId) {
        eventRegisterRef.value.init(eventId, gameId)
      } else {
        eventRegisterRef.value.init(eventId)
      }
    }
  }, 0)
}

// 处理返回比赛列表事件
const handleBackToList = () => {
  currentView.value = 'view4' // 返回比赛详情管理页面
}

// 处理返回比赛项目列表事件
const handleBackToEventsList = (gameId: number) => {
  // 设置当前视图为比赛项目管理页面
  currentView.value = 'viewGameEvent'
  
  // 在下一个tick中重新初始化比赛项目管理组件
  setTimeout(() => {
    if (gameEventInfoRef.value && gameId) {
      gameEventInfoRef.value.init(gameId)
    }
  }, 0)
}

// 处理编辑赛程事件
const handleEditSchedule = (scheduleData: any) => {
  currentView.value = 'viewNewSchedule'
  scheduleEditData.value = scheduleData
}

// 处理显示参赛选手列表事件
const handleShowScoreOrder = (data: { eventId: number, rankId: number }) => {
  currentView.value = 'viewScoreOrder'
  scoreOrderData.value = {
    eventId: data.eventId,
    rankId: data.rankId
  }
  
  // 在下一个tick中初始化参赛选手组件
  setTimeout(() => {
    // 这里可以根据需要添加初始化逻辑
  }, 0)
}

// 处理显示成绩录入页面事件
const handleShowWriteScore = (data: { eventId: number, rankId: number, scheduleId: number }) => {
  currentView.value = 'viewWriteScore'
  writeScoreData.value = {
    eventId: data.eventId,
    rankId: data.rankId,
    scheduleId: data.scheduleId
  }
}

// 处理返回成绩管理页面事件
const handleBackToScoreManager = () => {
  currentView.value = 'viewScoreManager'
}

// 处理志愿者活动创建完成事件
const handleActivityCreated = () => {
  // 返回到志愿者活动列表页面
  currentView.value = 'view7'
}

// 处理志愿者活动编辑事件
const handleActivityEdit = (activity: any) => {
  currentView.value = 'viewCreateVA'
  // 传递要编辑的活动数据
  setTimeout(() => {
    if (newVARef.value) {
      newVARef.value.initEdit(activity)
    }
  }, 0)
}

// 处理志愿者活动报名管理事件
const handleManageEnrollments = (activityId: number) => {
  currentView.value = 'viewVE'
  // 存储活动ID供报名管理页面使用
  currentActivityId.value = activityId
}

// 监听来自ORShowGame和ORChangeGameInfo的事件
const handleShowGameEvent = (event: CustomEvent) => {
  if (event.detail.type === 'modify') {
    handleModifyGame(event.detail.game)
  } else if (event.detail.type === 'create') {
    handleCreateGame()
  } else if (event.detail.type === 'backToList') {
    handleBackToList()
  } else if (event.detail.type === 'backToVAList') {
    currentView.value = 'view7'
  } else if (event.detail.type === 'showNewEventForm') {
    handleShowNewGameEventForm(event.detail.gameId)
  } else if (event.detail.type === 'editEventForm') {
    handleShowEditGameEventForm(event.detail.gameId, event.detail.eventData)
  } else if (event.detail.type === 'showEventRegisterForm') {
    handleShowEventRegisterForm(event.detail.eventId, event.detail.gameId)
  } else if (event.detail.type === 'backToEventsList') {
    handleBackToEventsList(event.detail.gameId)
  } else if (event.detail.type === 'newSchedule') {
    showView('viewNewSchedule')
  } else if (event.detail.type === 'editSchedule') {
    handleEditSchedule(event.detail.data)
  } else if (event.detail.type === 'showScoreOrder') {
    handleShowScoreOrder(event.detail.data)
  } else if (event.detail.type === 'backToScoreManager') {
    handleBackToScoreManager()
  } else if (event.detail.type === 'showWriteScore') {
    handleShowWriteScore(event.detail.data)
  } else if (event.detail.type === 'backToList') {
    // 处理从报名管理页面返回志愿者活动列表
    currentView.value = 'view7'
  } else if (event.detail.type === 'showNewNotice') {
    // 显示新建通知页面
    currentView.value = 'viewNewNotice'
  } else if (event.detail.type === 'showNoticeList') {
    // 返回通知列表页面
    currentView.value = 'viewNotice'
  } else if (event.detail.type === 'showReceivedNotices') {
    // 显示我收到的通知页面
    currentView.value = 'viewMyNotice'
  }
}

// 监听来自ORNewGameEvent的事件
const handleGameEventAdded = () => {
  // 可以在这里添加一些处理逻辑，比如刷新列表等
  console.log('比赛项目已添加')
}

// 在组件挂载时添加事件监听器
import { onMounted, onUnmounted } from 'vue'
onMounted(() => {
  window.addEventListener('showGameEvent', handleShowGameEvent as EventListener)
  window.addEventListener('gameEventAdded', handleGameEventAdded as EventListener)
  window.addEventListener('showNewNotice', () => {
    currentView.value = 'viewNewNotice'
  })
  window.addEventListener('showNoticeList', () => {
    currentView.value = 'viewNotice'
  })
  // 添加对showReceivedNotices事件的监听
  window.addEventListener('showReceivedNotices', () => {
    currentView.value = 'viewMyNotice'
  })
})

onUnmounted(() => {
  window.removeEventListener('showGameEvent', handleShowGameEvent as EventListener)
  window.removeEventListener('gameEventAdded', handleGameEventAdded as EventListener)
  window.removeEventListener('showNewNotice', () => {
    currentView.value = 'viewNewNotice'
  })
  window.removeEventListener('showNoticeList', () => {
    currentView.value = 'viewNotice'
  })
  // 移除对showReceivedNotices事件的监听
  window.removeEventListener('showReceivedNotices', () => {
    currentView.value = 'viewMyNotice'
  })
})
</script>    

<template>
    <div class="OR_menu">
        <div class="container">
          <!-- 左侧按钮区域 -->
          <div class="button-column left-column">
            <button class="menu-button" @click="showView('view1')">账号信息管理</button>
            <button class="menu-button" @click="showView('view2')">申办资格审核</button>
            <button class="menu-button" @click="showView('view3')">场地申请详情</button>
            <button class="menu-button" @click="showView('view4')">比赛详情管理</button>
          </div>
          
          <!-- 中间内容展示区域 -->
          <div class="content-area">
            <div v-if="currentView === 'view1'" class="content-view">
              <ORShowInfo />
            </div>
            <div v-else-if="currentView === 'view2'" class="content-view">
              <ORQuaApp @create-new-application="showView('viewNewApp')" />
            </div>
            <div v-else-if="currentView === 'viewNewApp'" class="content-view">
              <ORNewQuaApp @cancel="showView('view2')" />
            </div>
            <div v-else-if="currentView === 'view3'" class="content-view">
              <ORShowPlace @navigate-to-applications="showView('viewPlaceApp')" />
            </div>
            <div v-else-if="currentView === 'viewPlaceApp'" class="content-view">
              <ORPlaceApp @go-back="showView('view3')" />
            </div>
            <div v-else-if="currentView === 'view4'" class="content-view">
              <ORShowGame @modify-game="handleModifyGame" @create-game="handleCreateGame" @manage-game-items="handleManageGameItems" />
            </div>
            <div v-else-if="currentView === 'viewChangeGame'" class="content-view">
              <ORChangeGameInfo :game="currentGame" />
            </div>
            <div v-else-if="currentView === 'viewGameEvent'" class="content-view">
              <ORGameEventInfo ref="gameEventInfoRef" />
            </div>
            <div v-else-if="currentView === 'viewNewGameEvent'" class="content-view">
              <ORNewGameEvent ref="newGameEventRef" />
            </div>
            <div v-else-if="currentView === 'viewEventRegister'" class="content-view">
              <OREventRegister ref="eventRegisterRef" />
            </div>
            <div v-else-if="currentView === 'viewSchedule'" class="content-view">
              <ORShowSchedule @new-schedule="showView('viewNewSchedule')" />
            </div>
            <div v-else-if="currentView === 'viewNewSchedule'" class="content-view">
              <ORNewSchedule 
                :key="scheduleEditData ? 'edit' : 'new'" 
                :schedule-edit-data="scheduleEditData" 
                @cancel="showView('viewSchedule')" 
              />
            </div>
            <div v-else-if="currentView === 'viewScoreManager'" class="content-view">
              <ORShowScoreManager @show-score-order="handleShowScoreOrder" />
            </div>
            <div v-else-if="currentView === 'viewScoreOrder'" class="content-view">
              <ORScoreOrder 
                :event-id="scoreOrderData.eventId" 
                :rank-id="scoreOrderData.rankId" 
              />
            </div>
            <div v-else-if="currentView === 'viewWriteScore'" class="content-view">
              <ORWriteScore 
                :event-id="writeScoreData.eventId" 
                :rank-id="writeScoreData.rankId" 
                :schedule-id="writeScoreData.scheduleId" 
              />
            </div>
            <div v-else-if="currentView === 'view5'" class="content-view">
              <h2>裁判管理</h2>
              <p>在这里您可以管理裁判信息，分配裁判任务。</p>
            </div>
            <div v-else-if="currentView === 'view7'" class="content-view">
              <ORShowVA @navigate-to-create-va="showView('viewCreateVA')" @edit-activity="handleActivityEdit" @manage-enrollments="handleManageEnrollments" />
            </div>
            <div v-else-if="currentView === 'viewCreateVA'" class="content-view">
              <ORNewVA ref="newVARef" @cancel="showView('view7')" @activity-created="handleActivityCreated" />
            </div>
            <div v-else-if="currentView === 'viewVE'" class="content-view">
              <ORShowVE 
                v-if="currentActivityId" 
                :key="currentActivityId" 
                :activity-id="currentActivityId" 
              />
              <div v-else class="error">活动ID无效</div>
            </div>
            <div v-else-if="currentView === 'view8'" class="content-view">
              <h2>数据统计</h2>
              <p>在这里您可以查看各类数据统计报表，为决策提供支持。</p>
            </div>
            <div v-else-if="currentView === 'viewNotice'" class="content-view">
              <ORShowNotice />
            </div>
            <div v-else-if="currentView === 'viewMyNotice'" class="content-view">
              <ORShowMyNotice />
            </div>
            <div v-else-if="currentView === 'viewNewNotice'" class="content-view">
              <ORNewNotice />
            </div>
            <div v-else class="default-view">
              <h2>欢迎使用主办方管理系统</h2>
              <p>请选择左侧功能菜单开始操作</p>
            </div>
          </div>
          
          <!-- 右侧按钮区域 -->
          <div class="button-column right-column">
            <button class="menu-button" @click="showView('viewSchedule')">赛事行程安排</button>
            <button class="menu-button" @click="showView('viewScoreManager')">比赛成绩管理</button>
            <button class="menu-button" @click="showView('view7')">志愿任务招募</button>
            <button class="menu-button" @click="showView('viewNotice')">通知信息发布</button>
          </div>
        </div>
    </div>
</template>


<style scoped>
.OR_menu {
  width: 100%;
  height: 100%;
}

.page-title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: bold;
  margin: 0 0;
  color: #2E7D32;
  text-shadow: 0 0 6px rgba(56, 142, 60, 0.4);
  background: linear-gradient(to right, #2E7D32, #81C784);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: '微软雅黑 Light', sans-serif;
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  height: calc(100vh - 150px); /* 减去标题和其他元素的高度 */
  gap: 30px;
  padding: 20px;
  box-sizing: border-box;
  /* 容器本身不需要滚动条 */
  min-width: 0; /* 允许容器收缩以适应屏幕 */
}

.button-column {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 15%;
  height: 100%;
  flex-shrink: 0; /* 防止按钮列被压缩 */
}

.left-column {
  align-items: flex-start;
}

.right-column {
  align-items: flex-end;
}

.menu-button {
  width: 100%;
  padding: 20px 15px;
  margin: 15px 0;
  background: linear-gradient(to right, #66BB6A, #43A047);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-sizing: border-box;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  font-family: '微软雅黑 Light', sans-serif;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.menu-button:hover {
  background: linear-gradient(to right, #558B2F, #388E3C);
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.content-area {
  width: 100%;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #A5D6A7;
  border-radius: 12px;
  padding: 30px;
  box-sizing: border-box;
  min-height: 500px;
  box-shadow: 
    0 8px 16px rgba(0, 0, 0, 0.1),
    inset 0 0 10px rgba(129, 199, 132, 0.2);
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden; /* 防止内容区域出现不必要的滚动条 */
  min-width: 0; /* 允许内容区域收缩以适应容器 */
}

.content-view, .default-view {
  width: 100%;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: auto; /* 只有当内容真正超出时才显示滚动条 */
}

.content-view h2, .default-view h2 {
  color: #2E7D32;
  font-size: 2rem;
  margin-bottom: 20px;
  font-weight: bold;
  font-family: '微软雅黑 Light', sans-serif;
}

.content-view p, .default-view p {
  color: #558B2F;
  font-size: 1.2rem;
  line-height: 1.6;
  font-family: '微软雅黑 Light', sans-serif;
}

.subtitle {
  text-align: center;
  font-size: 1.5rem;
  color: #388E3C;
  text-shadow: 0 0 4px rgba(56, 142, 60, 0.3);
  font-family: '微软雅黑 Light', sans-serif;
  margin-bottom: 20px;
}
</style>